<template>
  <div class="articleList" ref="cont">
    <content-header >文章列表</content-header>
    
    <div class="container">
      <div class="body">
        <a-form-model layout="inline" :form="seachForm">
          <a-form-model-item label="商品分类：" prop="class">
            <a-tree-select
              v-model="seachForm.class_id"
              style="width:175px;"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="classData"
              :replaceFields="{key:'id',value:'id'}"
              allow-clear
              placeholder="选择栏目"
            >
            </a-tree-select>
          </a-form-model-item>
          <a-form-model-item label="商品搜索：" prop="title">
            <a-input placeholder="输入商品名称" v-model="seachForm.title" style="width:175px;" />
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="seachSubmit">
              搜索 
            </a-button>
          </a-form-model-item>
        </a-form-model>
        <div class="btns acea-row row-middle">
          <a-space :size="10">
            <a-button type="primary" icon="plus" @click="$router.push('/article/article_detail')">
              添加文章
            </a-button>
          </a-space>
        </div>
        <a-table :columns="columns" :pagination="false" :loading="loading" rowKey="id" :data-source="list" :scroll="{ x: list.length > 0&&screenWidth<=1400?1500:0, y: 0 }" >
          <div slot="pic" slot-scope="record"><img class="pic" :src="record.pic" alt=""></div>
          <div slot="title" slot-scope="record" class="line2" :title="record.title">{{record.title}}</div>
          <div slot="relateProduct" slot-scope="record" >
            <div class="line2" :title="record.product_title" v-if="record.product_title">
              {{record.product_title}}
            </div>
            <div v-else>无</div>
          </div>
          <div slot="createTime" slot-scope="record">{{record.createTime | changeTime}}</div>
          <div slot="action" slot-scope="record" class="action acea-row row-middle">
            <router-link :to="'/article/article_detail?id='+record.id" class="acea-row row-middle" >编辑<p></p></router-link>
            <a-popconfirm title="确认删除" ok-text="确定" cancel-text="取消" @confirm="delReply(record.id)">
              <a href="javascript:;" class="acea-row row-middle" >删除</a>
            </a-popconfirm>
          </div>
        </a-table>
        <div class="acea-row row-right" style="margin-top:20px">
          <a-pagination show-quick-jumper :defaultPageSize="limit" v-model="page" :total="count" @change="getData" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import contentHeader from 'components/common/content-header'
import request from 'api/request'
import moment from 'moment'

const columns = [
  { title: '文章ID', dataIndex: 'id',width:100, key: 'id' },
  { title: '文章图', key: 'pic',width:100,scopedSlots: { customRender: 'pic' }},
  { title: '标题', key: 'title',width:300,scopedSlots: { customRender: 'title' }},
  { title: '关联商品', key: 'relateProduct',width:300,scopedSlots: { customRender: 'relateProduct' }},
  { title: '浏览量', dataIndex: 'hits',width:150, key: 'hits'},
  { title: '创建时间', key: 'createTime',width:200, scopedSlots: { customRender: 'createTime' }},
  { title: '排序', dataIndex: 'sort',width:100, key: 'sort'},
  { title: '操作', key: 'action',width:300 ,scopedSlots: { customRender: 'action' },fixed:'right'},
]

export default {
  components:{
    contentHeader,
  },
  data() {
    return {
      screenWidth:0,
      columns,
      list:[],
      page:1,
      limit:10,
      count:0,
      seachForm:{
        class_id:null,
        title:''
      },
      classData:[],
      loading:false
    }
  },
  filters:{
    changeTime(e){
      return moment(e*1000).format("YYYY-MM-DD HH:mm:ss")
    }
  },
  created() {
    this.getData()
    this.getClass()
  },
  methods: {
    getData(type){
      this.loading = true
      let data = {
        page:this.page,
        limit:this.limit
      }
      request.get("/article/list",data).then(e=>{
        if(e.status == 200){
          this.list = e.data.data
          this.count = e.data.count
        }
        this.loading = false
      })
    },
    delReply(id){
      request.post("/article/del",{id}).then(e=>{
        if(e.status == 200){
          this.$message.success("删除成功")
          this.getData()
        }
      })
    },
    getClass(){
      request.get("/article/class/list").then(e=>{
        if(e.status == 200){
          let arr = []
          for(let i of e.data){
            if(i.pid == 0){
              i.children = e.data.filter(s=>s.pid == i.id)
              arr.push(i)
            }
          }
          this.classData = arr
        }
      })
    },
    seachSubmit(){ // 搜索submit
      let seachForm = this.seachForm
      seachForm.type = this.type
      seachForm.page = this.page,
      seachForm.limit = this.limit
      this.loading = true
      request.get("/article/list",seachForm).then(e=>{
        if(e.status == 200){
          this.list = e.data.data
          this.count = e.data.count
        }
        this.loading = false
      })
    },
  },
  mounted() {
    const that = this
    let cont = this.$refs.cont
    this.screenWidth = cont.clientWidth
    window.addEventListener("resize",(e)=>{
      that.screenWidth = cont.clientWidth
    })
  },
}
</script>

<style>
  .articleList .container{
    width: calc(100% - 32px);
    margin: 16px auto;
    background-color: #ffffff;
  }
  .articleList .container .body{
    padding: 16px;
  }
  .articleList .pic{
    display: block;
    width: 36px;
    height: 36px;
  }
  .articleList .action p{
    height: 14px;
    width: 1px;
    margin: 0 10px;
    background-color: #515a6e;
  }
  .articleList .btns{
    margin-top: 20px;
  }
</style>